import React from "react";
import { connect } from "react-redux";
import {
  loadIndexCityDate,
  SET_CURRENT_CITY
} from "@/components/main/index/actionCreator";
import { Cityone } from "@/components/main/index/styled";
import BScroll from "better-scroll";
// import { yellow } from "_ansi-colors@3.2.4@ansi-colors";

class City extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      cityList: [],
      listHeight: [],
      num: 0
    };
  }
  render() {
    return (
      <Cityone>
        <div className="city">
          <div className="cityze">
            <a href="./index">&lt;</a>
            <span>城市选择</span>
          </div>
          <div className="zhan"></div>
          <div className="left">
            <ul>
              {this.state.cityList.map((item, index) => (
                <li key={index} className="left_li">
                  <h2>{item.id}</h2>
                  <ul>
                    {item.list.map((value, idx) => (
                      <li
                        key={idx}
                        onClick={this.props.getCurrentCity.bind(this, value)}
                      >
                        <p>{value.name}</p>
                      </li>
                    ))}
                  </ul>
                </li>
              ))}
            </ul>
          </div>
          <div className="right">
            <ul>
              {this.state.cityList.map((item, index) => (
                <li
                  key={index}
                  style={{
                    background: this.state.num === index ? "yellow" : ""
                  }}
                  onClick={this.selectItem.bind(this, index)}
                >
                  <i>{item.id}</i>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Cityone>
    );
  }
  componentDidMount() {
    loadIndexCityDate(res => {
      var data = res.data;
      var cityList = [];
      for (var n in data) {
        cityList.push(data[n]);
      }
      this.setState({ cityList }, () => {
        setTimeout(() => {
          this.intiBScroll.call(this);
        }, 100);
      });
    });
  }
  //   双联动  初始化scroll
  intiBScroll() {
    this.BScroll = new BScroll(document.querySelector(".left"), {
      scrollY: true, //纵向滚动
      probeType: 3, //实时获取scroll top
      click:true
    });
    this.countListHeight.call(this);
    this.BScroll.on("scroll", pos => {
      this.setState({
        num: this.countCurrentNum.call(this, Math.abs(Math.round(pos.y)))
      });
    });
  }
  //获取左边li的高度
  countListHeight() {
    var nodes = document.querySelectorAll(".left_li");
    var height = 0;
    var listHeight = [];
    listHeight.push(0);
    for (var i = 0; i < nodes.length; i++) {
      let node = nodes[i];
      height += node.clientHeight;
      listHeight.push(height);
    }
    this.setState({ listHeight });
  }
  //动态NUM
  countCurrentNum(scrollTop) {
    for (var i = 0; i < this.state.listHeight.length; i++) {
      var height1 = this.state.listHeight[i];
      var height2 = this.state.listHeight[i + 1];
      if (scrollTop >= height1 && scrollTop < height2) {
        return i;
      }
    }
    return 0;
  }
  //selectItem 点击跳转
  selectItem(index) {
    var node = document.querySelectorAll(".left_li")[index];
    this.BScroll.scrollToElement(node, 200);
  }
}

const mapStateToProps = state => {
  return {
    currentCity: state.getIn(["indexReducer", "currentCity"])
  };
};
const mapDispatchToProps = dispatch => {
  return {
    getCurrentCity(item) {
      var temp = {
        city_id: item.id || "0",
        abbreviation: item.Abbreviation || "",
        name: item.name
      };
      dispatch({
        type: SET_CURRENT_CITY,
        val: temp
      });
      this.props.history.goBack();
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(City);
